<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-11-08 14:27:25
 * @LastEditTime: 2025-03-14 16:06:41
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 
 * @FilePath: \markdown-magic\src\pages\ImgToBase64\page\entry\Base64ToImg.vue
 * Copyright 版权声明
-->
<template>
  <div class="pageWrap">
    <div class="inputWrap">
      <a-textarea v-model:value="sourceBase64" :rows="10" placeholder="请输入base64图片数据"/>
    </div>
    <div class="btnsWrap">
      <a-space>
        <!-- <a-button type="primary" @click="handleProcess">转换</a-button> -->
        <a-dropdown>
          <template #overlay>
            <a-menu @click="handleProcess">
              <a-menu-item key="default">直接转</a-menu-item>
              <a-menu-item key="png">转png</a-menu-item>
              <a-menu-item key="jpg">转jpg</a-menu-item>
              <a-menu-item key="gif">转gif</a-menu-item>
            </a-menu>
          </template>
          <a-button type="primary">
            转换方式
            <DownOutlined />
          </a-button>
        </a-dropdown>
        <a-button v-if="sourceImg !== ''" type="primary" ghost @click="handleDownloadImg">下载</a-button>
        <a-button type="primary" ghost danger @click="handleClear">清空输入框</a-button>
      </a-space>
    </div>
    <div class="previewImg">
      <a-image
        :width="'auto'"
        :src="sourceImg"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {
  DownOutlined
} from '@ant-design/icons-vue'

const sourceBase64 = ref('')
const sourceImg = ref('')

const imgType = ref('png')

// 转换图片
const handleProcess = async (e) => {
  const { key } = e
  console.log(`🚀 ~ handleProcess ~ key:`, key)
  if (sourceBase64.value === '') {
    return
  }
  let imgHeader = ''
  switch (key) {
    case 'png':
      imgType.value = 'png'
      imgHeader = 'data:image/png;base64,'
      sourceImg.value = `${imgHeader}${sourceBase64.value}`
      break
    case 'jpg':
      imgType.value = 'jpg'
      imgHeader = 'data:image/jpg;base64,'
      sourceImg.value = `${imgHeader}${sourceBase64.value}`
      break
    case 'gif':
      imgType.value = 'gif'
      imgHeader = 'data:image/gif;base64,'
      sourceImg.value = `${imgHeader}${sourceBase64.value}`
      break
    case 'default':
      imgType.value = 'png'
      imgHeader = ''
      sourceImg.value = `${imgHeader}${sourceBase64.value}`
      break
  }
}

// 下载图片
const handleDownloadImg = async () => {
  const fileName = 'base64ToImg'
  // 创建a标签
  var link = document.createElement('a')
  // 设置a标签为不可见
  link.style.display = 'none'
  // 将a标签添加到body
  document.body.appendChild(link)
  // 设置a标签的href
  link.href = sourceImg.value
  // 设置a标签的download
  link.download = `${fileName}.${imgType.value}`

  // 模拟点击事件进行下载
  link.click()
  // 下载完成后移除a标签
  document.body.removeChild(link)
}

// 清空
const handleClear = () => {
  sourceBase64.value = ''
  sourceImg.value = ''
}
</script>



<style lang="scss" scoped>
.pageWrap {
  .btnsWrap{
    margin: 16px 0;
  }
  .previewImg{
    :deep(.ant-image) {
      .ant-image-img{
        width: auto !important;
      }
    }
  }
}
</style>